<template>
	<view class="container" style="height: 100%;">
		<view class="topBox">
			<view class="searchTopBox" >
				<view class="searchBoxRadius">
					<view class="grace-search-icon searchBoxIcon"></view>
					<input class="searchBoxIpt" type="search" v-model="ipt" @confirm="searchNow($event)" placeholder="关键字"></input>
				</view>
				<view class="search-btn" @click="searchNow($event)">搜索</view>
			</view>
			<view class="itemh thead">
				<view class="flex-n title" :class="index==0||index==1?'flex-n3':'flex-n1'" v-for="(item, index) in headArr" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="body">
			<view class="rank">
				<view  v-for="(item, index) in list" :key="index" class="itemh uni-divider">
					<view @click="goGoodEdit(item)" class="flex-n flex-n3" style="color: #00aaff;">{{item.name}}</view>
					<view class="flex-n flex-n3">{{item.model}}</view>
					<view class="flex-n flex-n1">{{item.count}}</view>
					<view class="flex-n flex-n1">{{unitList[item.unit]}}</view>
				</view>
			</view>
			<zhini-pagination :totalPage="total" :currentPage.sync="currentPage"  @pageNum="getNum" ></zhini-pagination>
		</view>
	</view>
</template>

<script>
var _self, loginRes;
// import GoodsList from '@/components/goods-list.vue';
import ZhiniPagination from '@/components/zhini-pagination/zhini-pagination.vue';
export default {
	components:{ZhiniPagination},
	data() {
		return {
			headArr:['名称','型号','数量','单位'],
			unitList:['卷','个','包','PCS','套','盒','米','箱','根','片','台','瓶'],
			title:'hello',
			currentPage:1,
			total:0,
			list:[],
			swiperheight:0,
			ipt:null
		}
	},
	onLoad() {
		loginRes = this.checkLogin('../index/index', '2');
		if(!loginRes){return false;}	
		this.getData()
		uni.getSystemInfo({
			success: (res)=> {
				let height=res.windowHeight-uni.upx2px(100)
				this.swiperheight=height;
			}
		});
	},
	methods: {
		goGoodEdit(item){
			uni.navigateTo({
				url: `/pages/gooddetail/gooddetail?item=${JSON.stringify(item)}`
			});
		},
		searchNow(e) {
			this.currentPage=1
			// if (this.ipt == ''||(!this.ipt)) {
				// uni.showToast({
				// 	title: '未输入搜索关键字',
				// 	icon: 'none',
				// 	duration: 1000
				// });
				// return false;
			// }
			console.log(this.ipt,'ipt')
			this.getData()
			// var that = this;
			// var newArr = that.searchKey;
			// newArr.push(this.ipt);
			// this.searchKey = newArr;
			// var newStr = newArr.join('-');
			// uni.setStorage({
			// 	key: 'searchLocal',
			// 	data: newStr
			// });
		},
	  getNum(e){
		console.log("选中的页面是-->",e)  
		this.currentPage=e;
		this.getData()
	  },
	  async getData(){
	  	uni.showLoading({title:""});
	  	let [err,result]=await this.$http.post("/goods/listPage",{
	  		pageSize:20,
	  		pageNum:this.currentPage,
			param:{
				name:this.ipt,
				// goodstype:this.goodstype+'',
				// storage:this.storage+''
			}
	  	})
	  	let {data:res}=result
	  	console.log(res.data,666)
	  	if (!this.$http.errorCheck(err,res)) {
	  		uni.hideLoading();
	  		return
	  	}
	  	if(res.code!=200){
	  		uni.showToast({ title:res.message,icon:"none"});
	  		return
	  	}
	  	this.total=Math.ceil(res.total/20)
	  	// if(this.currPage>1){
	  		// this.list=[...this.list,...res.data.records]
	  		// if(this.total<this.currPage*this.pageSize){
	  		// 	this.status="noMore";
	  		// }else{
	  		// 	this.status="more";
	  		// }		
	  	// }else{
	  	// 	this.list=res.data.records
	  	// }
		this.list=res.data
	  	uni.hideLoading();
	  },
	}
}
</script>

<style lang="less">
	// .container{
	// 	display: flex;
	// 	min-height: 100vh;
	// 	flex-direction: column;
	// }
	// .body{
	// 	overflow-y: scroll;  
	// }
	.topBox{
		position: fixed;
		width: 100%;
		top: 0;
		background: #fff;
		height: 170rpx;
		z-index: 999;
	}
	.rank{
		margin-top: 170rpx;
	}
	.flex-n{
		flex: 1;
		text-align: center;
	}
	.title{
		font-weight: 600;
	}
	.itemh{
		display: flex;
		padding: 20rpx 20rpx;
		border-bottom: 1px solid #ccc;
		height: 30upx;

	}
	.flex-n1{
		flex: 1;
	}
	.flex-n3{
		flex: 3;
	}
	.searchTopBox {
		width: 100%;
		/* background-color: #0b877f; */
		height: 100upx;
		box-sizing: border-box;
		padding-top: 15upx;
		display: flex;
		align-items: center;
	}
	.search-btn{
		margin-left: 20rpx;
	}
	.searchBoxRadius {
		width: 80%;
		height: 70upx;
		background-color: #F5F5F5;
		margin-left: 5%;
		overflow: hidden;
		border-radius: 35upx;
	}

	.searchBoxIcon {
		font-size: 40upx;
		margin-top: 20upx;
		margin-left: 20upx;
		float: left;
	}

	.searchBoxIpt {
		height: 70upx;
		line-height: 70upx;
		margin-left: 20upx;
		float: left;
	}

	.searchBotBox {
		width: 100%;
		margin-top: 30upx;
		padding: 15upx 3%;
		box-sizing: border-box;
	}
</style>
